<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

    </style>
</head>
<body>
<canvas id="box" width="600" height="600">您的浏览器不支持画布</canvas>
<script type="text/javascript">
    var box=document.getElementById("box");
    var pen=box.getContext("2d");
    var time=new Date();
    var h=time.getHours();
    var m=time.getMinutes();
    var s=time=time.getSeconds();
    pen.clearRect(0,0,box.width,box.height);
    pen.globalCompositeOperation="destination-over";
    pen.arc(300,300,200,0,Math.PI*2);
    pen.stroke();
    pen.clip();

    pen.beginPath();
    var images=new Image();
    images.src="img/1.jpg";
    images.onload=function(){
        pen.drawImage(images,0,0,box.width,box.height);
    }
    pen.closePath();
    pen.save();
    pen.translate(300,300);
    pen.arc(0,0,200,0,Math.PI*2);
    pen.stroke();
    pen.restore();
    for(var i= 1;i<=12;i++){
        pen.beginPath();
        pen.save();
        pen.translate(300,300);
        pen.rotate(Math.PI/180*30*i);
        pen.moveTo(0,-180);
        pen.lineTo(0,-200);
        pen.stroke();
        pen.restore();
        pen.closePath();
    }
    for(var i= 1;i<=60;i++){
        pen.beginPath();
        pen.save();
        pen.translate(300,300);
        pen.rotate(Math.PI/180*6*i);
        pen.moveTo(0,-190);
        pen.lineTo(0,-200);
        pen.stroke();
        pen.restore();
        pen.closePath();
    }
</script>
</body>